
import * as React from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { TabBarItem } from '../components/TabbarItem/Item'
import { tabbarModel } from '../model/Tabbar'
import { useLocalStore, Observer } from 'mobx-react-lite'
import './index.scss'

export default () => {

  const store = useLocalStore(() => tabbarModel)

  return (
    <Observer>
      {() =>
        <View className="xxm-hairline xxm-hairline--top tabbar tabbar--safe tabbar--fixed xxm-hairline--top">
          {
            store.items.map((it) =>
              <TabBarItem
                {...it}
                key={it.tabUrl}
                selected={store.selected === it.tabUrl}
                onTrigger={(url: string) => {
                  if(it.onClick){
                    return it.onClick(it)
                  }
                  Taro.switchTab({ url })
                  store.setSelected(url)
                }}
              />
            )
          }
        </View>
      }
    </Observer>
  )
}